<template>
	<view class="bussiness-detail-contant ">
		<!-- 商家信息 -->
		<view class="top-information">
			<view class="user-img">
				<image class="" src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/user-img.png"></image>
			</view>
			<view class="mid-bussiness">
				<view class="bussiness-name">
					<view class="">{{ shopInfo.shop_name != undefined ? shopInfo.shop_name : "" }}</view>
					<image class=" " :src="shopInfo.shop_img != undefined ? shopInfo.shop_img : ''"></image>
				</view>
				<view class="mid-num">
					<view class="fans">
						<text class="" style="color: #986EFA;">{{ shopInfo.fanCount != undefined ? shopInfo.fanCount : 0 }} </text>
						<text class="">粉丝 </text>
					</view>
					<view class="fans">
						<text class=""style="color: #986EFA;">{{ shopInfo.showNum != undefined ? shopInfo.showNum : 0 }}  </text>
						<text class="">热度 </text>
					</view>
				</view>
			</view>
			
			<view class="follow" @click="followShop">
				<text class="add-follow"> {{shopInfo.focus != undefined ? shopInfo.focus == 1 ? "取消关注" :"+关注": "" }}</text>
			</view>
			
			<view class=""></view>
		</view>
		<!-- 中间标签 -->
		<view class="top-information mid-sell  ">
			<view class="all-lable">
				<view @click="chooseDirection(1)"  :class="direction === 1 ? 'all-sell sell_focus' : 'all-sell'" >所有在售</view>
				<view @click="chooseDirection(2)"  :class="direction === 2 ? 'all-sell sell_focus' : 'all-sell'">历史成交</view>
			</view>
			<view class="sift">
				<view  @click="chooseType(0)" class="sift-all" :style="type === 0? 'color: #7948EA;background-color: #F1EBFF;':''">全部</view>
				<view  @click="chooseType(1)" class="sift-all" :style="type === 1? 'color: #7948EA;background-color: #F1EBFF;':''">天选</view>
				<view  @click="chooseType(3)" class="sift-all" :style="type === 3? 'color: #7948EA;background-color: #F1EBFF;':''">福袋</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="business-box-list">
			<template v-for="(item, index) in goodsList" :key="index" >
				<view class="business-list" @click="gotoDetail(item)">
					<view class="list-left-img">
						<image class="bussiness-img" :src="item.img"></image>
						<image class="level-img " :src="item.class_img"></image>
					</view>
					<view class="list-right-tit">
						<view class="tit-like">
							<view class="">
								<text class="">{{item.name}}</text>
							</view>
							
						</view>
						<view class="mid-name" v-if="item.is_bt == 1">
							<image  class="head-null" src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/head-null.png"></image>
						</view>
						<view class="list-money">
							<view class="money-now">
								<text class="">￥{{item.price}}</text>
							</view>
							<view class="money-num">
								<text class="">余</text>
								<text class="" style="color: #AF85FF;">50/</text>
								<text class="">共</text>
								<text class="" style="color: #AF85FF;">100</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>

	import { ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app'
    import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()
	const shopId = ref()
	const type = ref(0)  // 0全部 1天选 3福袋
	const direction = ref(1) //1所有在售 2历史成交
	const goodsList = ref([])
	const currentPage = ref(1)
	const canLoadMore = ref(true)
	async function getGoodsList() {
		let params = {
			shop_id:shopId.value,
			page:currentPage.value,
			limit:10,
			type:type.value,
			direction:direction.value
		};
		console.log(params)
		
		const res = await http.request({
			url: '/api/shop/shopDetails',
			method: 'POST',
			data: params
		})
		console.log(res)
		if (res.st == 1) {
			if (res.data.length < 10) {
				canLoadMore.value = false
			}
			goodsList.value = [...goodsList.value, ...res.data]
		}else {
			canLoadMore.value = false
		}

	}

	const shopInfo = ref({})
	async function getShopInfo() {
		let params = {
			shop_id:shopId.value,
		};
		
		const res = await http.request({
			url: '/api/shop/shopBaseInfo',
			method: 'POST',
			data: params
		})
		if (res.st == 1) {
			shopInfo.value = res.data
		}

	}

	// 上拉加载
	onReachBottom(() => {
		if(canLoadMore.value){
			currentPage.value++
			getGoodsList()
		}
	})

	async function clearParams(){
		canLoadMore.value = true;
	}

	async function clearData(){
		goodsList.value = []
		currentPage.value = 1
	}

	// 关注
	async function followShop(){
		if (
			userCodeStore.usercode.token == '' ||
			userCodeStore.usercode.userId == ''
		) {
			uni.utils.toast('为了让您有更好的体验，请先登录')
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/login/login`,
				})
			}, 2000)
			return
		}
		const res = await http.request({
			url: '/api/shop/focusShop',
			method: 'POST',
			data: {
				id: shopId.value
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.showToast({
				title: '操作成功',
				duration: 2000,
			})
			getShopInfo();
		} else {
			uni.showToast({
				title: '操作失败',
				icon: 'error',
				duration: 2000,
			})
		}
	}


	onShow(() => {
		clearData();
		clearParams();
		if (shopId.value){
			getGoodsList();
			getShopInfo();
		}
	})

	onLoad((options) => {
		shopId.value = options.id;
	})

	function chooseType(t){
		type.value = t
		clearParams();
		clearData();
		getGoodsList();
	}

	function chooseDirection(t){
		direction.value = t;
		clearParams();
		clearData();
		getGoodsList();
	}

	function gotoDetail(item){
		if (direction.value == 2){
			uni.utils.toast("历史成交不可查看详情")
			return;
		}
		if (item.type == 1){
			uni.navigateTo({
				url: `/pages/chosen/tianxuan-detail?id=${item.id}`,
			})
		}
		if (item.type == 3){
			uni.navigateTo({
				url: `/pages/bag/lucky-box-center?id=${item.id}`,
			})
		}
	}
	
	
</script>

<style lang="scss" scoped>
	.bussiness-detail-contant {
		background-color: #E9EAF2;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.top-information {
		width: 730rpx;
		height: 186rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 20rpx auto;
		display: flex;
		// justify-content: space-between;

		.user-img {
			width: 22%;
			margin: 26rpx;

			image {
				width: 134rpx;
				height: 134rpx;
				border-radius: 20rpx;
			}
		}
	}
	.mid-bussiness{
		width: 40%;
		height: 186rpx;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		
		.bussiness-name{
			display: flex;
			margin: 20rpx;
			align-items: center;
			font-size: 36rpx;
			font-weight: 600;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-left: 20rpx;
				text-align: center;
				
				
			}
		}
		
	}
	.mid-num{
		display: flex;
		margin: 16rpx;
		justify-content: space-between;
		font-size: 24rpx;
		.fans{
			display: flex;
			flex-direction: column;
			text-align: center;
		}
		
		
	}
	.all-lable {
		display: flex;
		justify-content: space-around;
		width: 90%;
		margin: 20rpx auto;
		height: 62rpx;
		border-bottom: 1rpx dashed #A6A6A6;
		padding-bottom: 22rpx;

		.all-sell{
			width: 144rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background-color: #F5F5F5;
			color: #9C9C9C;
			font-size: 32rpx;
			font-weight: 600;
			border-radius: 14rpx;
		}

		.sell_focus {
			background-color: #F1EBFF;
			color: #7948EA;
		}
	}

	.mid-sell {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 222rpx;
	}

	.sift {
		display: flex;
		justify-content: space-between;
		width: 90%;

		margin: 10rpx auto;

		.sift-all {
			width: 134rpx;
			height: 56rpx;
			border-radius: 14rpx;
			background: #F5F5F5;
			font-size: 28rpx;
			font-weight: 600;
			color: #9C9C9C;
			line-height: 56rpx;
			text-align: center;

		}
	}
	.follow{
		display: flex;
		// margin: auto;
		font-size: 24rpx;
		position: relative;
		.add-follow{
			width: 120rpx;
			height: 46rpx;
			background: #AF8DF7;
			border-radius: 14rpx;
			text-align: center;
			line-height: 46rpx;
			color: #fff;
			position: absolute;
			left: 95rpx;
			top:15rpx;
		}
	}
	.business-box-list{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 0rpx auto;
			.business-list{
				width: 730rpx;
				height: 240rpx;
				background-color: #fff;
				border-radius: 14rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
			}
			.list-left-img{
				width: 60%;
				height: 100%;
				display: flex;
				justify-content: center;
				position: relative;
				
				.bussiness-img{
					width: 384rpx;
					height: 196rpx;
					margin: auto;
				}
				.level-img{
					width: 97rpx;
					height: 48rpx;
					position: absolute;
					left: 28rpx;
					top: 14rpx;
					image{
						width: 100%;
						height: 48rpx;
					}
				}
			}
		}
		.list-right-tit{
			width: 40%;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			.tit-like{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				image{
					width: 24rpx;
					height: 21rpx;
					margin: auto;
				}
				
			}
			.mid-name{
				display: flex;
				font-size: 16rpx;
				color: #383838;
				margin-top: 20rpx;
				line-height: 30rpx;
				text-align: center;
				justify-content: space-between;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
				.head-null{
					height: 97rpx;
					width: 106rpx;
				}
			}
	
		}
		.list-money{
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			.money-now{
				font-size: 28rpx;
			}
			.money-num{
				display: flex;
				font-size: 20rpx;
				line-height: 40rpx;
				text-align: center;
				margin-right: 10rpx;
			}
		}
	
</style>